<?php

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Simple Input Tabs</title>
    <link rel="stylesheet" href="sit.css" title="sit" type="text/css" media="screen" charset="utf-8">
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1");</script>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
    <script>
    $(document).ready(function(){
	    $("#code").hover(
	    	function(){
		    	$("#image").stop().fadeOut();
	    	},
	    	function(){
		    	$("#image").stop().fadeIn();
	    	});
    })
    </script>
</head>

<body>

    <div id="wrapper">
        <div id="title" class="text">
            <a href="http://get-simple.info/download/"><div id="logo">Get Simple CMS</div></a>
            <span style="font-size:100px;">SIMPLE INPUT TABS</span>it's that simple
        </div>

        <div id="welcome">
            <h2>Hello!</h2>

            <p>The following are basic install and usage instructions for the simply named, simple to run content plugin. Created for an equally simple, <a href="http://get-simple.info/download/">GetSimpleCMS</a> (go get it!).<br>
            This plugin is designed to allow template makers an easy out-of-box method of creating different content sections in their designs. Breaking free of the single content shackles that previously held them back. For instance it allows you to create separate entities such as a sidebar and have users populate it with their own content, separate from the main body.<br>
            If you have not yet got the plugin file, you can find the latest version over at the CMS's website, <a href="http://get-simple.info/extend/plugin/simple-extra-inputs/523/">HERE</a>.<br>
            <br>
            Well, lets begin shall we?</p><br>
        </div>

        <div class="side" style="float:left; border-top-right-radius:30px;">
            <div class="ribbon" style="margin-left:-40px; border-bottom-right-radius: 10px; float:left;
">
                SET UP INSTRUCTIONS!
            </div><br>
            <br>

            <p>Hold your mouse over an item for more information.</p>

            <table class="item" style="height:80px;">
                <tr>
                    <td><img src="File-icon.png" alt="File-icon" width="50" height="50"></td>

                    <td class="hover" title="Find the downloaded folder and extract it. Double clicking usually works. Keep an eye on the file that comes out.">Double click your zip file.</td>

                    <td style="width:20px;">&rarr;</td>

                    <td><img src="folder-icon.png" alt="folder-icon" width="40" height="50"></td>

                    <td class="hover" title="Locate the place you uploaded your CMS files. Usually it would be in the 'root' file of your server.">Locate your CMS installation folder.</td>
                </tr>

                <tr>
                    <td></td>

                    <td></td>

                    <td></td>

                    <td>&crarr;</td>

                    <td></td>
                </tr>

                <tr>
                    <td><img src="folder-icon.png" alt="folder-icon" width="40" height="50"></td>

                    <td class="hover" title="In the location you found earlier there should be a folder named 'plugins'. Paste the newly copied file inside there, and you're DONE!">Place the file in your "plugins" folder.</td>

                    <td>&larr;</td>

                    <td><img src="File-icon.png" alt="File-icon" width="50" height="50"></td>

                    <td class="hover" title="From the zip file came a new file of the same name. 'simple_input_tabs.php' Find this file and copy it.">Grab the extracted file named "simple_input_tabs.php"</td>
                </tr>
            </table>
            <p>That is all it takes to install. You are now ready to begin using it!<br>Remember to include it with your template distribution if you utilize its functions.</p><br>
        </div>

        <div class="side" style="float:right; border-top-left-radius:30px;">
            <div class="ribbon" style="margin-right:-40px; border-bottom-left-radius: 10px; float:right;
">
                TEMPLATE INSTRUCTIONS!
            </div><br>
            <br>

            <p>Mouse over for information.</p>

            <div id="code" class="item" style="overflow:hidden;"><div style="background-color: rgba(107,51,51,0.25); height:122px; padding:5px; font-size:16px;">Open your web page file with a text editor. Locate where you would like your content to appear, and in the main section of the page copy and paste this code:<br><span style="background-color:white;">&lt;?php insert_page_content(); ?&gt;</span><br>In other places you would like content (ie: a sidebar) paste the code with a name in the brackets, in quotes.<br><span style="background-color:white;">&lt;?php insert_page_content("sidebar"); ?&gt;</span></div><div id="image" style="height:132px; margin-top:-132px;"><img src="code.jpg" alt="code" width="460" height="132"></div></div>
            <p>The names you choose in the code you paste (above) will determine the names of the different Tabs used to view and edit the content.</p><br>

        </div>
        <div id="usage"><center><div class="ribbon" style="border-bottom-left-radius:10px; border-bottom-right-radius:10px;">USAGE!</div></center>
        <p>.</p>
        <center><img src="Under%20construction.png" alt="Under%20construction" width="581" height="143" /></center>
        </div>
    </div>
</body>
</html>
